<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <title>Code</title>
    <link rel="stylesheet" href="">
    <style>
    pre {
        outline: 1px solid #ccc;
        padding: 5px;
        margin: 5px;
    }

    .string {
        color: green;
    }

    .number {
        color: darkorange;
    }

    .boolean {
        color: blue;
    }

    .null {
        color: magenta;
    }

    .key {
        color: red;
    }

    pre,
    code {
        display: block;
        background: none repeat scroll 0 0;
        background-color: #555555;
        border-radius: 4px 4px 4px 4px;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 10px inset;
        clear: both;
        font-family: 'Consolas', 'Courier', 'Monaco', monospace;
        color: #fff;
        /*background-color: #f8f8f8;*/
        margin: 5px 0px;
        overflow: auto;
        padding: 10px;
        white-space: pre;
        /*text-indent: 1em;*/
    }
    </style>
</head>

<body>

    <pre>
        <code>
const fruits = [
    { name: 'apple', color: 'red' },
    { name: 'strawberry', color: 'red' },
    { name: 'banana', color: 'yellow' },
    { name: 'pineapple', color: 'yellow' },
    { name: 'grape', color: 'purple' },
    { name: 'plum', color: 'purple' }
];

function test(color) {
    // 效果等同  return fruits.filter(f => f.color == color); 
    return fruits.filter(function(f) {
        return f.color == color
    });
}

console.log(test('red'));
        </code>
    </pre>
    <hr>
    <pre>
        <code id="result">
            
        </code>
    </pre>

    <script src="./js/jquery.min.js"></script>
    <script src="./js/utils.js"></script>
    <script>
    $(function() {
        const fruits = [
            { name: 'apple', color: 'red' },
            { name: 'strawberry', color: 'red' },
            { name: 'banana', color: 'yellow' },
            { name: 'pineapple', color: 'yellow' },
            { name: 'grape', color: 'purple' },
            { name: 'plum', color: 'purple' }
        ];

        function test(color) {
            // 效果等同  return fruits.filter(f => f.color == color); 
            return fruits.filter(function(f) {
                return f.color == color
            });
        }

        $('#result').html(syntaxHighlight(test('red')));

    })
    </script>

</body>
</html>